<template>
    <div :class="['row',noborder?'noborder':'']" @click="rowClick">
      <div class="row-title">
        <span :class="['icon iconfont', icon]" :style="{'color':color}" v-if="icon"></span>
        {{title}}
      </div>
      <div class="row-right">
        <div class="value">{{value}}</div>
        <div class="placeholder" v-if="!value&&placeholder">{{placeholder}}</div>
        <slot name="rowRight" />
        <div class="isclick" v-if="isclick"></div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      title:{ type:String },
      color:{ type:String,value:'#666666' },
      icon:{ type:String },
      isclick: {type:Boolean},
      value: {type:String | Number},
      placeholder: {type:String},
      noborder: {type:Boolean},
    },
    data() {
      return { 
      };
    }, 
    mounted() {
      
    },
    beforeDestroy() {
    },
    methods: {
      rowClick(){
          this.$emit("rowClick")
      }
    }
  };
  </script>
  
  <style lang="less" scoped>
  .row{
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      align-items: center;
      height: 44px;
      position: relative;
      .row-right{
        display: flex; 
        align-items: center;
      }
      .icon{
        font-size: .36rem;
        margin-right: .12rem;
      }
      .value{
        color: #666;
        text-align: left;
        font-size: 0.22rem;
        width: 4rem;
      }
      .isclick{
        margin-left: 4px;
      }
      &:active{
          opacity: .7;
      }
      &::before{
          content: '';
          position: absolute;
          bottom: 0;
          right: 0;
          // width: 97.5%;
          left: 20px;
          height: 1px;
          background: #eee;
  
      }
      &.noborder::before{
        display: none;
      }
      .row-title{
        white-space: nowrap;
        margin-right: 20px;
        display: flex;
        align-items: center;
        font-size: 0.22rem;
      }
  }
  .placeholder{
    color: #999;
  }
  
  </style>